<template>
  <div>
    <!-- register.html  12-55 -->
    <!--页面主体-->
    <div class="register">
      <h2>新用户注册</h2>
      <ul>
        <li>
          <span>邮箱：</span>
          <input
            @blur="checkEmail"
            v-model="email"
            type="text"
            id="uname"
            placeholder="请输入邮箱名"
          />
          <!-- em 加载x √的小图标  i 提示文字 -->
          <em
            v-show="status_email == 1 || status_email == 2 || status_email == 3"
            class="icon_error"
            style="display: inline"
          ></em>
          <em
            v-show="status_email == 4"
            class="icon_ok"
            style="display: inline"
          ></em>
          <i style="display: block" v-show="status_email == 1"
            >请输入您的邮箱</i
          >
          <i style="display: block" v-show="status_email == 2"
            >邮箱格式不正确</i
          >
          <i style="display: block" v-show="status_email == 3"
            >此邮箱已经注册</i
          >
        </li>
        <li>
          <span>密码：</span>
          <input
            @blur="checkPwd"
            v-model="pwd"
            type="password"
            id="upwd"
            placeholder="请输入密码"
          />
          <em
            v-show="status_pwd == 1 || status_pwd == 2"
            class="icon_error"
            style="display: inline"
          ></em>
          <em
            v-show="status_pwd == 4"
            class="icon_ok"
            style="display: inline"
          ></em>
          <i style="display: block" v-show="status_email == 1"
            >请输入您的密码</i
          >
          <i style="display: block" v-show="status_email == 2"
            >密码长度应为6-12个字符之间</i
          >
        </li>
        <li>
          <span>重复密码：</span>
          <input
            v-model="rePwd"
            type="password"
            id="upwd2"
            placeholder="请重复输入密码"
          />
         <em
            v-show="status_rePwd == 1"
            class="icon_error"
            style="display: inline"
          ></em>
          <em
            v-show="status_rePwd == 4"
            class="icon_ok"
            style="display: inline"
          ></em>
          <i style="display: block" v-show="status_rePwd == 1"
            >两次输入的密码不一致</i
          >
        </li>
        <li>
          <span>手机号：</span>
          <input
            @blur="checkPhone"
            v-model="phone"
            type="text"
            id="phone"
            placeholder="请输入手机号"
          />
          <em
            v-show="status_phone == 1 || status_phone == 2 || status_phone == 3"
            class="icon_error"
            style="display: inline"
          ></em>
          <em
            v-show="status_phone == 4"
            class="icon_ok"
            style="display: inline"
          ></em>
          <i style="display: block" v-show="status_phone == 1"
            >请输入您的手机号</i
          >
          <i style="display: block" v-show="status_phone == 2"
            >手机号格式不正确</i
          >
          <i style="display: block" v-show="status_phone == 3"
            >此手机号已注册</i
          >
        </li>
        <li>
          <span>验证码：</span>
          <input type="text" class="inp_yzm" placeholder="请输入验证码" />
          <img src="../assets/images/yzm.png" alt="" />
          <strong class="icon_refresh"></strong>
        </li>
        <li class="li_checkbox">
          <label>
            <input type="checkbox" v-model="agree" />
            <span>我已阅读并同意用户注册协议</span>
          </label>
        </li>
        <li class="li_btn">
          <button
            type="button"
            :class="{ disabled: !agree }"
            :disabled="!agree"
          >
            提交注册
          </button>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 表单数据项初始化
      // 表单各项状态 0 默认 1空  2格式错误  3已注册  4正确
      email: "",
      status_email: 0, //0 默认 1空  2格式错误  3已注册  4正确
      phone: "",
      status_phone: 0, //0 默认 1空  2格式错误  3已注册  4正确
      pwd: "",
      status_pwd: 0, // 0 默认 1空  2格式错误  4正确
      rePwd: "",
      status_rePwd: 0, // 0 默认 1不一致  4正确
      agree: false, // 是否同意协议
    };
  },
  methods: {
    checkPwd(){

    },
    checkPhone() {
      // 1 空
      if (this.phone.length == 0) return (this.status_phone = 1);
      // 2 格式不正确   格式: 13354280969
      const reg_phone = /^1[3-9]\d{9}$/;
      if (!reg_phone.test(this.phone)) return (this.status_phone = 2);
      // 3 已注册 请求服务端校验
      const url = `user_check_phone.php?phone=${this.phone}`;
      this.axios.get(url).then((res) => {
        console.log(res);
        // 接口code 1为存在   2为不存在
        this.status_phone = res.data.code == 1 ? 3 : 4;
      });
    },
    checkEmail() {
      // 1 空
      if (this.email.length == 0) return (this.status_email = 1);
      // 2 格式不正确   格式: xxx@xx.xxx
      const reg_email = /^\w{2,}@(\w+\.)+[a-zA-Z]{2,6}$/;
      if (!reg_email.test(this.email)) return (this.status_email = 2);
      // 3 已注册 请求服务端校验
      const url = `user_check_uname.php?uname=${this.email}`;
      this.axios.get(url).then((res) => {
        console.log(res);
        // 接口code 1为存在   2为不存在
        this.status_email = res.data.code == 1 ? 3 : 4;
      });
    },
  },
};
</script>
<style lang=""></style>
